<!--
 * @Author: Haochen
 * @Date: 2021-12-07 17:58:25
 * @LastEditTime: 2021-12-25 10:22:37
 * @FilePath: \recipes-admin-system\src\components\common\Pages.vue
-->
<template>
  <div class="pages">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @prev-click="$emit('prevPage')"
      @next-click="$emit('nextPage')"
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="[4, 8, 12]"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>

<script>
import bus from '@/utils/bus.js';

export default {
  props: ['total', 'currentPage', 'pageSize'],
  data() {
    return {};
  },
  methods: {
    sendPageSize() {
      bus.$emit('sendPageSize', this.pageSize);
    },
    // * 切换每页多少条
    handleSizeChange(val) {
      console.log(val);
      bus.$emit('handleSizeChange', val);
    },
    // * 跳转页面
    handleCurrentChange(val) {
      bus.$emit('handleCurrentChange', val);
    },
  },
};
</script>

<style scoped>
.pages {
  width: fit-content;
  text-align: center;
  margin: 20px auto;
}

button {
  width: 75px;
  height: 30px;
  margin: 0 10px;
  border: none;
  border-radius: 30px;
}

button:hover {
  cursor: pointer;
}
</style>
